{% extends 'base.html' %}

{% block title %}实验指南 - 机械臂实验系统{% endblock %}

{% block extra_css %}
<style>
    .guide-container {
        max-width: 900px;
        margin: 0 auto;
    }
    
    .guide-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .guide-header h1 {
        font-weight: bold;
        color: #333;
    }
    
    .guide-header p {
        color: #666;
        font-size: 1.1rem;
    }
    
    .step-card {
        margin-bottom: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }
    
    .step-header {
        background-color: #f8f9fa;
        padding: 1rem;
        border-bottom: 1px solid #eee;
    }
    
    .step-header h3 {
        margin: 0;
        display: flex;
        align-items: center;
    }
    
    .step-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #007bff;
        color: white;
        margin-right: 10px;
        font-size: 0.9rem;
    }
    
    .step-body {
        padding: 1.5rem;
    }
    
    .notice-card {
        padding: 1.5rem;
        background-color: #f8f9fa;
        border-left: 4px solid #ffc107;
        margin: 2rem 0;
        border-radius: 0 5px 5px 0;
    }
    
    .notice-title {
        font-weight: bold;
        color: #333;
        display: flex;
        align-items: center;
    }
    
    .notice-title i {
        margin-right: 8px;
        color: #ffc107;
    }
    
    .step-img {
        width: 100%;
        border-radius: 5px;
        margin: 1rem 0;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }
    
    .btn-start {
        margin-top: 2rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="guide-container">
    <div class="guide-header">
        <h1>机械臂拧螺丝实验指南</h1>
        <p>本指南将帮助您了解实验的步骤和注意事项，确保您能够顺利完成实验</p>
    </div>
    
    <div class="notice-card">
        <div class="notice-title">
            <i class="bi bi-exclamation-triangle-fill"></i>
            实验注意事项
        </div>
        <ul class="mt-3">
            <li>请在实验前仔细阅读本指南，了解实验的具体步骤和操作要点</li>
            <li>使用鼠标操作机械臂，按住并拖动可控制机械臂的不同关节</li>
            <li>第三步中提供了自动拧螺丝功能，您可以选择不同的螺栓规格和电机转速</li>
            <li>在实验过程中，可通过"检查步骤"按钮验证当前步骤是否完成</li>
            <li>完成全部四个步骤后，系统会记录您的实验数据供后续分析</li>
        </ul>
    </div>
    
    <h2 class="mb-4">实验步骤</h2>
    
    <div class="step-card">
        <div class="step-header">
            <h3><span class="step-number">1</span> 定位螺丝</h3>
        </div>
        <div class="step-body">
            <p>
                第一步是通过鼠标控制机械臂，将其移动到目标螺丝的位置上方。您需要按住鼠标左键并拖动来移动机械臂底座和各个关节，直到机械臂套筒准确定位到螺丝上方。
            </p>
            <div class="row">
                <div class="col-md-7">
                    <ul>
                        <li>按住鼠标左键并拖动可移动机械臂底座</li>
                        <li>按住Shift键的同时拖动可旋转底座</li>
                        <li>点击并拖动机械臂的其他关节可调整套筒位置</li>
                        <li>将套筒悬停在螺丝钉上方后，点击"检查步骤"按钮</li>
                        <li>当位置正确时，会出现"提交并继续"按钮</li>
                    </ul>
                </div>
                <div class="col-md-5">
                    <img src="/static/img/4.jpg" 
                         alt="定位螺丝" class="step-img">
                </div>
            </div>
        </div>
    </div>
    
    <div class="step-card">
        <div class="step-header">
            <h3><span class="step-number">2</span> 扣住螺丝</h3>
        </div>
        <div class="step-body">
            <p>
                定位完成后，需要控制机械臂套筒准确扣住螺丝。您需要调整套筒的角度和位置，确保套筒能够稳固地扣住螺丝头部。
            </p>
            <div class="row">
                <div class="col-md-7">
                    <ul>
                        <li>按住鼠标左键拖动控制机械臂套筒，将其旋转向下对准螺丝</li>
                        <li>调整套筒位置，使其靠近螺丝头部</li>
                        <li>确保套筒正确朝向螺丝并足够接近</li>
                        <li>套筒正确扣住螺丝后，点击"检查步骤"按钮</li>
                        <li>系统验证扣住成功后，点击"提交并继续"进入下一步</li>
                    </ul>
                </div>
                <div class="col-md-5">
                    <img src="/static/img/7.jpg" 
                         alt="扣住螺丝" class="step-img">
                </div>
            </div>
        </div>
    </div>
    
    <div class="step-card">
        <div class="step-header">
            <h3><span class="step-number">3</span> 拧下螺丝</h3>
        </div>
        <div class="step-body">
            <p>
                成功扣住螺丝后，需要拧出螺丝。在这个步骤中，您可以手动操作或使用自动拧出功能，同时可以观察实时的力数据可视化图表。
            </p>
            <div class="row">
                <div class="col-md-7">
                    <ul>
                        <li>左侧会显示实时力数据可视化，直观展示拧螺丝过程中的力变化</li>
                        <li>右侧可以选择不同的参数：
                            <ul>
                                <li>螺栓规格：M4、M6或M8</li>
                                <li>电机转速：100、150或200 r/min</li>
                                <li>螺纹线数：1或2</li>
                            </ul>
                        </li>
                        <li>您可以手动操作：按住鼠标左键并拖动机械臂套筒，沿逆时针方向旋转</li>
                        <li>或点击"自动拧出螺丝"按钮，系统将自动完成拧出过程</li>
                        <li>自动拧出过程中，力数据可视化会实时更新</li>
                        <li>螺丝完全拧出后，点击"提交并继续"按钮进入下一步</li>
                    </ul>
                </div>
                <div class="col-md-5">
                    <img src="/static/img/3.jpg" 
                         alt="拧下螺丝" class="step-img">
                </div>
            </div>
        </div>
    </div>
    
    <div class="step-card">
        <div class="step-header">
            <h3><span class="step-number">4</span> 放入盒子</h3>
        </div>
        <div class="step-body">
            <p>
                螺丝拧出后，需要控制机械臂将螺丝移动到指定的收集盒中。这一步骤需要精确控制机械臂的移动路径。
            </p>
            <div class="row">
                <div class="col-md-7">
                    <ul>
                        <li>按住鼠标左键并拖动控制机械臂，将套住螺丝的套筒移动到收集盒上方</li>
                        <li>移动时注意避免碰撞</li>
                        <li>将套筒准确移动到收集盒上方后，点击"检查步骤"按钮</li>
                        <li>位置正确时，系统会显示"释放螺丝"按钮</li>
                        <li>点击"释放螺丝"按钮，螺丝会平躺在收集盒上</li>
                        <li>最后点击"提交并继续"按钮完成实验</li>
                    </ul>
                </div>
                <div class="col-md-5">
                    <img src="/static/img/8.jpg" 
                         alt="放入盒子" class="step-img">
                </div>
            </div>
        </div>
    </div>
    
    <div class="text-center">
        <a href="{% url 'experiment_platform' %}" class="btn btn-primary btn-lg btn-start">
            <i class="bi bi-play-fill"></i> 开始实验
        </a>
    </div>
</div>
{% endblock %} 